<template>
	<div class="container">
		<!-- 头部信息 -->
		<h3 class="header-title clearfix">
			<span class="fl"></span>
			<p class="fl">{{headerTitle}}</p>
		</h3>
		<!-- 导航栏 -->
		<comNavTabs :navList="navList" @switch="tabSwitch"></comNavTabs>
		<!-- 数据展示的列表 -->
		<comTable :options="tableList" @openExamine="openExamineDialog"
		></comTable>
		<!-- 审核未通过提醒弹窗 -->
		<praFeedback ref="remind" @subRemind="submitFail" :options="remind"></praFeedback>
		<!-- 审核操作 -->
		<netExamine :options="examineData" @examinePass="examinePass" @examineFail="examineFail"></netExamine>
		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="pageChange"
				:current-page.sync="cur"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
				background
			></el-pagination>
		</div>
		
	</div>
</template>

<script>
export default{
	components:{
		comNavTabs: ()=> import("../common/comNavTabs.vue"),
		comTable: ()=> import("../common/comTable.vue"),
		praFeedback: ()=> import("../common/praFeedback.vue"),
		netExamine: ()=> import("../common/netExamine.vue")
	},
	data(){
		return {
			headerTitle:'家政网点管理',								//标题
			/* 导航栏列表数据 */
			navList:{
				index:0,				//当前是在哪个tab栏
				data:[
					{title:'待审核'},
					{title:'已通过'},
					{title:'未通过'}
				]	
			},
			/* 列表数据 */
			tableList:{
				list:[
					{title:'企业名称',prop:'companyName',isClick:false},
					{title:'所在地区',prop:'address',isClick:false},
					{title:'企业类型',prop:'companyType',isClick:false},
					{title:'企业规模',prop:'companyScale',isClick:false},
					{title:'注册时间',prop:'createTime',isClick:false}
				],
				noOperation:true,	//是否有操作项
				operation:[			//操作项内容
					{name:'审核',isBtn:false,title:'openExamine'},
				],
				data:[				//请求到的表格数据
					{
						companyName: '天都人力资源有限公司',			//企业名称
						address: '上海-闵行-强劲大厦',				//所在地区
						companyType: '合资',							//企业类型
						companyScale: '100-500',					//企业规模
						createTime: '2020-8-20',					//注册时间
					},
					{
						companyName: '天都人力资源有限公司',			//企业名称
						address: '上海-闵行-强劲大厦',				//所在地区
						companyType: '合资',							//企业类型
						companyScale: '100-500',					//企业规模
						createTime: '2020-8-20',					//注册时间
					},
				]
			},
			/* 审核数据 */
			examineData:{
				centerDialogVisible: false,							//显示弹窗
				companyName: '天都人力资源有限公司',					//公司名称
				address: '上海-闵行-强劲大厦',						//公司地址
				companyNature: '民营企业',							//公司性质
				companyScale: '100-500人',							//公司规模
				companyPhone: '13434343434',						//企业联系电话
				legalPerson: '张三',									//法人姓名
				remarks: '',										//备注
				industry: '制造业',									//所属行业
				telphone: '15656565656',							//联系电话
				mailbox: '123456@qq.com',							//企业邮箱
				accountPicture: 'http://cdn3.pixhey.com/thumbs/3584689/126312000/pixhey_126312000.jpg',									//对公账户认证
				introduction: '',									//企业介绍
				subPass: 'examinePass',								//审核通过
				subFail: 'examineFail',								//审核未通过
				showBtn: false,										//是否显示审核按钮
			},
			remind:{
				title:"未通过理由",								//弹窗标题
				noNav:false,									//是否有选项
				eventName:'subRemind',							//提交事件的名称
				userInfo:{},
			},
			
			/* 分页功能数据 */
			cur:1,						//当前是第几页
			pageSize: 10,				//每页有多少条数据
			totalNum: 0,				//总共有多少条数据,根据这个数据去适配页数
		}
	},
	methods:{
		// tab栏切换
		tabSwitch(index){
			console.log(index);
			this.navList.index = index;
			if(index == 0){
				this.tableList.operation = [
					{name:'审核',isBtn:false,title:'openExamine'},
				];
			}else{
				this.tableList.operation = [
					{name:'查看',isBtn:false,title:'openExamine'},
				];
			}
		},
		// 打开审核弹窗
		openExamineDialog(data){
			console.log(data);
			this.examineData.centerDialogVisible = true;
			this.navList.index == 0?this.examineData.showBtn=true:this.examineData.showBtn=false;
		},
		// 打开审核未通过弹窗
		examineFail(){
			this.$refs.remind.open();
		},
		// 审核通过
		examinePass(){
			
			this.examineData.centerDialogVisible = false;
		},
		// 提交审核未通过的数据
		submitFail(data){
			console.log(data.textarea);
			if(!data.textarea){
				this.$message({
					message: '请填写未通过理由！',
					type: 'warning'
				})
				return false;
			}
			
			this.$message({
				message: '操作成功！',
				type: 'success'
			})
			this.$refs.remind.close();
			this.examineData.centerDialogVisible = false;
		},
		
		
		//当前页是第几页,点击的第几页的时候调用这个函数
		pageChange(p) {
			console.log(p);
			this.cur = p;
			
		},
		//每页有多少条,10,20,50等,点击选择的时候调用这个方法
		handleSizeChange (val) {
			console.log(val);
			this.pageSize = val;
			
		},
	}
}
</script>

<style scoped="scoped">
.container{
	background-color: #fff;padding-left: 20px;
}
.header-title{
	padding: 0 0 20px 0;border-bottom: 1px solid #D2D2D2;
}
.header-title span{
	width: 15px;height: 30px;background-color: #0064E4;margin-right: 20px;
}
.header-title p{
	font-weight: bold;line-height: 30px;
}
.pageBox{
	margin-top: 20px;
}
</style>
